import React, { Component } from 'react'

import echarts from 'echarts' // echarts 图表库
import 'echarts/map/js/china' // 中国地图数据，已经实现了自动注册

import { Card, Col, Row } from 'antd'

import { getMapData } from '../../api/echarts'

const randomColor = () => {
  const base = '0123456789ABCDEF'
  const len = base.length
  let color = '#'
  for (let i = 0; i < 6; i++) {
    const index = Math.floor(Math.random() * len)
    color += base.slice(index, index + 1)
  }
  return color
}

export default class Dashboard extends Component {

  state = {
    total: {}
  }

  componentDidMount() {
    getMapData().then(res => {
      console.log('数据：', res)
      this.setState({
        total: res.chinaTotal
      })
      const data = res.areaTree[0].children.map(area => ({
        name: area.name,
        value: area.total.nowConfirm
      }))
      this._renderMap(data)
    }).catch(e => console.log(e))
  }

  /**
   * 渲染疫情地图
   * @param {*} data 
   */
  _renderMap = data => {
    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.getElementById('my-chart'))
    // 绘制图表
    myChart.setOption({
      title: { // 标题
        text: '最新国内疫情数据',
        subtext: '数据来源：腾讯',
        sublink: 'https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5'
      },
      tooltip: { // 提示
        trigger: 'item', // 触发方式
        formatter: '{b}<br>{c}' // 内容格式器 地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
      },
      visualMap: [ // 视觉映射
        {
          type: 'piecewise', // 分段
          pieces: [ // 每段的样式
            {gte: 200, color: 'darkred'},
            {gte: 100, lt: 200, color: 'red'},
            {gte: 50, lt: 100, color: 'red', colorAlpha: .8},
            {gte: 10, lt: 50, color: 'red', colorAlpha: .5},
            {gte: 1, lt: 10, color: 'red', colorAlpha: .3},
            {gte: 0, lt: 1, color: 'white'}
          ]
        }
      ],
      series: [ // 序列
        {
          name: '疫情地图',
          type: 'map',
          map: 'china',
          label: {
            show: true
          },
          data
        }
      ]
    })
  }

  render() {
    const {
      confirm,
      dead,
      heal,
      importedCase,
      noInfect,
      nowConfirm,
      nowSevere,
      suspect
    } = this.state.total
    return (
      <>
        <div>
          <Row gutter={16}>
            <Col span={6}>
              <Card title="累计确诊" bordered={false} bodyStyle={{color: randomColor(), fontSize: 22}}>
                { confirm }
              </Card>
            </Col>
            <Col span={6}>
              <Card title="累计治愈" bordered={false} bodyStyle={{color: randomColor(), fontSize: 22}}>
                { heal }
              </Card>
            </Col>
            <Col span={6}>
              <Card title="累计死亡" bordered={false} bodyStyle={{color: randomColor(), fontSize: 22}}>
                { dead }
              </Card>
            </Col>
            <Col span={6}>
              <Card title="境外输入" bordered={false} bodyStyle={{color: randomColor(), fontSize: 22}}>
                { importedCase }
              </Card>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={6}>
              <Card title="无症状感染" bordered={false} bodyStyle={{color: randomColor(), fontSize: 22}}>
                { noInfect }
              </Card>
            </Col>
            <Col span={6}>
              <Card title="现有确诊" bordered={false} bodyStyle={{color: randomColor(), fontSize: 22}}>
                { nowConfirm }
              </Card>
            </Col>
            <Col span={6}>
              <Card title="现有疑似" bordered={false} bodyStyle={{color: randomColor(), fontSize: 22}}>
                { suspect }
              </Card>
            </Col>
            <Col span={6}>
              <Card title="现有重症" bordered={false} bodyStyle={{color: randomColor(), fontSize: 22}}>
                { nowSevere }
              </Card>
            </Col>
          </Row>
        </div>
        <div id="my-chart" style={{width: 800, height: 600}}></div>
      </>
    )
  }
}
